<template>
  <div>
		<div class="pie-chart-warp">
			<span class="title">{{title}}</span>
			<chart-download 
				:chart-type="chartType"
				type="PIE"/>
		</div>

		<stats-chart-empty class="pie-chart" v-show="isEmpty">
      暂无数据
    </stats-chart-empty>
		<!-- start 图表 -->
    <div v-show="!isEmpty" id="PieChart" class="pie-chart" />
		<!-- end 图表 -->
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
/* component */
import {
  ChartDownload
} from './common/index';
import StatsChartEmpty from '@src/modules/report/common/StatsChartEmpty.vue';
/* util */
import _ from 'lodash';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'pie-chart',
	mixins: [ChartsMixin],
	components: {
		StatsChartEmpty,
		ChartDownload
	},
  props: {
    pieChartData: {
      type: Object,
      default: () => ({})
    },
		title: {
			type: String,
			default: ''
		},
		chartType: {
      type: String,
			default: ''
    }
  },
  setup(props, { emit }) {

    const chart = ref(null)
		const isEmpty = ref(false);

		const chartData = computed(() => {
			return props.pieChartData
		})
		watch(chartData, (n,o) => {
			drawChart()
		})

		function drawChart() {
			const {verySatisfied, commonly, dissatisfied, satisfied, veryDissatisfied} = props.pieChartData
      
			isEmpty.value = Boolean(!commonly && !dissatisfied && !satisfied)
			if (isEmpty.value) return
      
			let data = ref([])
			data.value = [
				{
					value: verySatisfied,
					name: '非常满意'
				},
				{
					value: satisfied,
					name: '满意'
				},
				{
					value: commonly,
					name: '一般'
				},
				{
					value: dissatisfied,
					name: '不满意'
				},
				{
					value: veryDissatisfied,
					name: '非常不满意'
				}
			]
			const dataOption = {
				tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          },
					formatter(data) {
						const seriesName = `<div>${ data.seriesName }</div>`
						const value = `<div>
              ${data.name} ${data.marker} ${data.value} (${data.percent}%)
						</div>`
						return seriesName + value
					}
        },
				grid: {
          left: 120,
          containLabel: true
        },
        legend: {
          orient: 'vertical',
					right: '20%',
					top: '40%',
					data: [
						{
							name: '非常满意',
							icon: 'circle',
						},
						{
              name: '满意',
              icon: 'circle',
            },
						{
              name: '一般',
              icon: 'circle',
            },
						{
              name: '不满意',
              icon: 'circle',
            },
						{
							name: '非常不满意',
							icon: 'circle',
						},
					]
        },
				series: [
					{
						name: '满意度构成',
						type: 'pie',
						radius: '80%',
						label: {
							normal:{
								show: true,
								position: 'outside',//标签的位置
								textStyle : {
									fontWeight : 300,
									fontSize : 14//文字的字体大小
								},
								// formatter:'{d} %'
								formatter: '{b}： {c} ({d}%)',
							}
						},
						data: data.value,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}
			chart.value.clear()
      chart.value.setOption(dataOption)
		}

    const initChart = () => {

      chart.value = echarts5.init(document.getElementById('PieChart'), 'shb')

			chart.value.on('click', value => {
        emit('fetchTableData', undefined, 'Pie')
      })

      drawChart()
    }

    onMounted(() => {
      initChart()
    })

    onUnmounted(() => {
      if (!chart.value) return;

      chart.value = null;
    });

    return {
			chart,
			isEmpty,
			initChart
		}
  },
};
</script>

<style lang="scss" scoped>
.pie-chart-warp {
	display: flex;
	justify-content: space-between;
	.title {
		font-weight: bold;
	}
}
.pie-chart {
	width: 100%;
	min-height: 352px;
  
  margin-right: 0;
  margin-left: 0;
  
	position: relative;
	left: inherit;
}
</style>
